﻿@{
    Lang lang = ViewBag.Lang;
    ViewBag.Title = lang.CREATERETAIL;
    Layout = "~/Views/Shared/_LayoutMember.cshtml";
}
@model DataHelper.UserProfile
<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-external-link-square"></i>@lang.CREATERETAIL
        <div class="panel-tools">
            <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a><a class="btn btn-xs btn-link panel-config"
                href="#panel-config" data-toggle="modal"><i class="fa fa-wrench"></i></a><a class="btn btn-xs btn-link panel-refresh"
                    href="#"><i class="fa fa-refresh"></i></a><a class="btn btn-xs btn-link panel-expand"
                        href="#"><i class="fa fa-resize-full"></i></a><a class="btn btn-xs btn-link panel-close"
                            href="#"><i class="fa fa-times"></i></a>
        </div>
    </div>
    <div class="panel-body">
        <p>
            Create one account to manage everything you do with ClipOne, from your shopping
            preferences to your ClipOne activity.
        </p>
        <hr>
        <form action="@(Model.UserId == 0 ? "/Admin/CreateRetail" : "/Admin/ChangeInfo")" @(Model.UserId == 0 ? "" : "enctype=multipart/form-data")  id="form"  method="post">
        <input type="hidden" name="UserId" value="@Model.UserId" />
        <div class="row">
            <div class="col-md-12">
                <div class="errorHandler alert alert-danger no-display">
                    <i class="fa fa-times-sign"></i>You have some form errors. Please check below.
                </div>
                <div class="successHandler alert alert-success no-display">
                    <i class="fa fa-ok"></i>Your form validation is successful!
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="control-label">
                        First Name <span class="symbol required"></span>
                    </label>
                    <input type="text" placeholder="Insert your First Name" class="form-control" id="nam"
                        name="name" value="@Model.Name">
                </div>
                <div class="form-group">
                    <label class="control-label">
                        Email Address <span class="symbol required"></span>
                    </label>
                    <input @(Model.UserId == 0?"":"readonly") type="email" placeholder="Text Field" class="form-control" id="email" name="email" value="@Model.Email">
                </div>
                @{
                    if (Model.UserId == 0)
                    {
                    <div class="form-group">
                        <label class="control-label">
                            Password <span class="symbol required"></span>
                        </label>
                        <input type="password" class="form-control" name="password" id="password" value="">
                    </div>
                    <div class="form-group">
                        <label class="control-label">
                            Confirm Password <span class="symbol required"></span>
                        </label>
                        <input type="password" class="form-control" id="password_again" name="password_again"
                            value="">
                    </div>
                    }
                    else
                    {
                    <div class="form-group">
                        <label class="control-label">
                            @lang.AVARTA <span class="symbol required"></span>
                        </label>
                        <div class="user-image" style="width:150px;float:left;margin-right:10px;">
                            <div class="fileupload-new thumbnail">
                                <img width="150px" height="150px" src="@Model.Avatar" alt="">
                            </div>
                        </div>
                        <input type="file" name="AvatarFile" style='float: left;margin-top: 30px;'/>
                    </div>
                    }
                }
            </div>
            <div class="col-md-6">
                <div class="form-group connected-group">
                    <label class="control-label">
                        Date of Birth <span class="symbol required"></span>
                    </label>
                    <div class="row">
                        <div class="col-md-3">
                            <select name="dd" id="dd" class="form-control">
                                <option value="">DD</option>
                                @for (int i = 1; i < 32; i++)
                                { 
                                    <option value="@i" @(Model.Birthday.HasValue && i == Model.Birthday.Value.Day ? " selected" : "")>@i</option>
                                }
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select name="mm" id="mm" class="form-control">
                                <option value="">MM</option>
                                @for (int i = 1; i < 32; i++)
                                { 
                                    <option value="@i" @(Model.Birthday.HasValue && i == Model.Birthday.Value.Month ? " selected" : "")>@i</option>
                                }
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input type="text" placeholder="YYYY" id="yyyy" value="@(Model.Birthday.HasValue ? Model.Birthday.Value.Year.ToString() : "")" name="yyyy" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">
                        Gender <span class="symbol required"></span>
                    </label>
                    <div>
                        <label class="radio-inline">
                            <div class="iradio_minimal-grey" style="position: relative;">
                                <input type="radio" class="grey"  @(Model.Sex=="F"?"checked":"") value="F" name="sex" id="gender_female" style="position: absolute;
                                    top: -10%; left: -10%; display: block; width: 120%; height: 120%; margin: 0px;
                                    padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0;
                                    background-position: initial initial; background-repeat: initial initial;">
                                <ins class="iCheck-helper" style="position: absolute; top: -10%; left: -10%; display: block;
                                    width: 120%; height: 120%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);
                                    border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
                                </ins>
                            </div>
                            Female
                        </label>
                        <label class="radio-inline">
                            <div class="iradio_minimal-grey" style="position: relative;">
                                <input type="radio" @(Model.Sex=="M"?"checked":"") class="grey" value="M" name="sex" id="gender_male" style="position: absolute;
                                    top: -10%; left: -10%; display: block; width: 120%; height: 120%; margin: 0px;
                                    padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0;
                                    background-position: initial initial; background-repeat: initial initial;">
                                <ins class="iCheck-helper" style="position: absolute; top: -10%; left: -10%; display: block;
                                    width: 120%; height: 120%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);
                                    border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
                                </ins>
                            </div>
                            Male
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label class="control-label">
                                Address <span class="symbol required"></span>
                            </label>
                            <input class="form-control tooltips" type="text" data-original-title="We'll display it when you write reviews"
                                data-rel="tooltip" value="@Model.Address" title="" data-placement="top" name="address" id="address">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label class="control-label">
                                Phone <span class="symbol required"></span>
                            </label>
                            <input class="form-control tooltips" type="text" data-original-title="We'll display it when you write reviews"
                                data-rel="tooltip"  value="@Model.Phone" title="" data-placement="top" name="phone" id="phone">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div>
                    <span class="symbol required"></span>Required Fields
                    <hr>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <p>
                    By clicking REGISTER, you are agreeing to the Policy and Terms &amp; Conditions.
                </p>
            </div>
            <div class="col-md-4">
                <button class="btn btn-yellow btn-block" type="submit">
                    @lang.FINISH <i class="fa fa-arrow-circle-right"></i>
                </button>
            </div>
        </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        Main.init();
        FormValidator.init();
    });
</script>
